<template>
    <div class="wallpaper_box">
        <ul class="wallpaper_list">
            <li v-for="item in list" :key="item.id">
                <img :src="item.cover_img">
                <p>{{ item.title }}</p>
            </li>
        </ul>
    </div>
</template>

<script>
  export default {
    name: 'Mine',
    data () {
      return {
        list: []
      }
    },
    mounted:function() {
        this.$axios.get("http://localhost:3000/getArticleList").then((response) => {
          if (localStorage.love){
            this.list = JSON.parse(localStorage.love);
          }
          if (response.data.data){
            for(var i = 0; i < response.data.data.length;i++){
              for(var j = 0;j < this.list.length;j++){
                if(response.data.data[i].id === this.list[j].id){
                  this.list[j] = response.data.data[i]
                }
              }
            }
          }
        },(err) => {
          console.log('Load Pic Data Failed',err)
        })
      }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.wallpaper_box{
  height: 100%;
}

.wallpaper_list{
  padding: 44px 0 48px;
  text-align: center;
  list-style-type: none;
}

.wallpaper_list:after{
  clear:both;
  content:'.';
  display:block;
  width: 0;
  height: 0;
  visibility:hidden;
}

.wallpaper_list li{
  float: left;
  width: 28.5%;
  height: 105px;
  padding-left: 8px;
  padding-right: 8px;
  padding-bottom: 8px;
  margin: 0 auto;
  margin-top: 15px;
  overflow: hidden;
}

.wallpaper_list li img{
  display: block;
  width: 100%;
  height: 65px;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  -moz-border-top-right-radius: 5px;
  -moz-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -webkit-border-top-left-radius: 5px;
  box-shadow: 5px 5px 10px #000;
}

.wallpaper_list li p{
  color: #fff;
  font-size: 12px;
  padding: 10px 0;
}

.wallpaper_list_loading div {
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
}
</style>
